<template>
  <div class="resource container">
    <div class="top_btns">
      <el-button type="primary" icon="el-icon-plus" @click="optClick('add', row)">新增</el-button>
    </div>
    <div class="resource_list_box flex align_items_ctr">
      <i class="el-icon-arrow-left" @click="pageChangeClick('-')"></i>
      <div class="resource_list flex_1 flex">
        <div @click="resourceClick(item, index)"
          :class="['resource_item flex align_items_ctr jc_ctr', currentResourceIndex === index ? 'activeResource fw' : '']"
          v-for="(item, index) in resourceList" :key="index">
          {{ item.name }}
        </div>
      </div>
      <i class="el-icon-arrow-right" @click="pageChangeClick('+')"></i>
    </div>
    <div class="resource_info flex">
      <div class="r_info">文献数量：123</div>
      <div class="r_info">未开始：123</div>
      <div class="r_info">泛读：123</div>
      <div class="r_info">精读：123</div>
    </div>
    <div class="file_table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column :prop="item.field" :label="item.label" v-for="(item, index) in tableDataFields" :key="index">
          <template slot-scope="{row}">
            <div v-if="item.optionsMap && item.optionsMap[row[item.field]]">
              {{ item.optionsMap[row[item.field]] }}
            </div>
            <div v-else>{{ row[item.field] }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="optClick('edit', row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentResourceIndex: 0,
      resourceList: [
        { name: '资源1' },
        { name: '资源1' },
        { name: '资源1' },
        { name: '资源1' },
        { name: '资源1' },
      ],
      tableDataFields: [
        { field: 'fileName', label: '文件名称' },
        { field: 'data_type', label: '数据类型' },
        { field: 'language', label: '语种' },
        { field: '1', label: '收录期刊' },
        { field: '1', label: '影响因子' },
        {
          field: 'read_status', label: '研读状态',
          optionsMap: { 0: '未研读', 1: '已研读' }
        },
        {
          field: 'trans_status', label: '翻译状态',
          optionsMap: { 0: '未翻译', 1: '已翻译' }
        },
      ],
      tableData: [
        { fileName: '这是文件名', data_type: '这是数据类型', language: '中文', read_status: 1, trans_status: 1 },
        { fileName: '这是文件名', data_type: '这是数据类型', language: '中文', read_status: 1, trans_status: 1 },
        { fileName: '这是文件名', data_type: '这是数据类型', language: '中文', read_status: 1, trans_status: 1 },
      ]
    }
  },
  methods: {
    resourceClick (item, index) {
      this.currentResourceIndex = index
    },
    pageChangeClick (type) {
      if (type === '+') {
        this.resourceList = [{ name: '第二页' }]
      }
      if (type === '-') {
        this.resourceList = [{ name: '上一页' }]
      }
    },
    optClick (type, row) {
      if (type === 'add') { }
      if (type === 'edit') { }
    }
  }
}
</script>

<style lang="less" scoped>
.resource {
  .top_btns {
    margin-bottom: 10px;
  }

  .resource_list_box {
    margin-bottom: 40px;

    i {
      font-weight: bold;
      font-size: 30px;
    }

    .resource_list {
      margin: 0 50px;

      .resource_item {
        width: calc((100% - 4 * 20px) / 5);
        margin-right: 20px;
        height: 100px;
        line-height: 2;
        border: 1px solid var(--bgcThemeColor);
        border-radius: 10px;

        &:nth-of-type(5n) {
          margin-right: 0;
        }
      }

      .activeResource {
        background: var(--bgcThemeColor);
        color: #fff;
      }
    }
  }

  .resource_info {
    padding: 20px 0;

    .r_info {
      width: calc((100% - 3 * 20px) / 4);
      margin-right: 20px;

      &:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>